<style type="text/css">
	.my-table table{
		width: 100%; 
		border: 1px solid #e9e9e9;
	}
	.my-table table th{
		text-align: center;
		height: 40px;
	}
	.my-table table td{
		text-align: center;
		height: 50px;
	}
	.my-table table .options{
		width: 95%;
		border: 1px solid #ccc;
		padding: 0 5px;
	}
	.my-table table .idx1 a{
		padding: 0 5px;
	}
	.my-table table .myselect{
		color:#ff6b6b;
	}
	.my-table table .noselect{
		color:#ccc;
	}
	.img-div{display: inline-block;}
	.options-div1{display: flex;margin-bottom:0;padding-left: 0;margin-top:20px;}
	.my-table .form_group_hide{
		margin-top:0;
	}
	.my-table table  td .options-div1{
		text-align: left;
	}
	.options-div1 label{
		width: 10px;
		padding-left: 12px;
	}
</style>
<script type="text/javascript" src="/static/admin/js/core/jquery.min.js"></script>
<div class="form-group col-xs-12 {$extra_class|default=''}" id="form_group_{$name}">
    <label class="col-xs-12" for="{$name}">{$title|htmlspecialchars}</label>
    <div class="col-sm-12">
    	
    	<div class="my-table">
    		<table border="1">
  				<tr>
    				<th style="width: 10%;">文本</th>
    				<th style="width: 70%;">选项</th>
    				<th style="width: 10%;">是否正确答案</th>
    				<th style="width: 10%;"><a class="my-add" href="javascript::;" style="min-width:50px;background: #ff6b6b;color:#fff;padding: 4px 8px;">添加</a></th>
  				</tr>
  				<?php if($value){ foreach($value as $key => $v){ ?>

					<tr class="my-tr<?php echo $key?>" data-idx="<?php echo $key?>">
			    		<td>
			    			<div class="table-cell idx1">
			    				<input type="hidden" class="idx-hiden" name="options[<?php echo $v['key'];?>][is_img]" value="<?php echo $v['is_img'];?>">
	                        	<a href="javascript::;" class="<?php echo $v['is_img'] == 1 ? 'noselect' : 'myselect';?>">文本</a>
                                <!-- /<a href="javascript::;" class="<?php echo $v['is_img'] == 1 ? 'myselect' : 'noselect';?>">图片</a> -->
	                        </div>
	                    </td>
			    		<td>
			   				<div class="options-div <?php echo $v['is_img'] == 1 ? 'form_group_hide' : '';?>">
			   					<span><?php echo $v['key'];?>. </span><input class="options" type="text" name="options[<?php echo $v['key'];?>][text]" value="<?php echo  $v['is_img']==0 ? $v['text'] : '';?>">
			   				</div>


			   				<div class="options-div1 form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 <?php echo $v['is_img'] == 1 ? '' : 'form_group_hide';?>" id="form_group_{$name}_<?php echo $v['key'];?>">
							    <label class="col-xs-12" for="{$name}_<?php echo $v['key'];?>"><?php echo $v['key'];?>. </label>
							    <div class="col-xs-12 js-upload-image ">
							        <div id="file_list_{$name}_<?php echo $v['key'];?>" class="uploader-list">
							        	<?php if($v['is_img'] == 1){ ?>
							            <div class="file-item thumbnail">
							                <img data-original="<?php echo $v['text'];?>" src="<?php echo $v['text'];?>" width="100">
							                <i class="fa fa-times-circle remove-picture"></i>
							            </div>
							            <?php }?>
							        </div>

							        <div class="clearfix img-div" ></div>
							        <input type="hidden" name="{$name}_<?php echo $v['key'];?>" data-multiple="false" data-watermark='' data-thumb='' data-size="0" data-ext='' id="{$name}_<?php echo $v['key'];?>" value="<?php echo $v['text'];?>">
							        <div id="picker_{$name}_<?php echo $v['key'];?>">上传单张图片</div>
							        
							    </div>
							</div>


			    			
			    		</td>
			    		<td>
			    			<div class="table-cell">
	                        	<label class="css-input switch switch-sm switch-primary"><input type="checkbox" name="answer[<?php echo $v['key'];?>]" <?php echo $v['is_answer'] == 1 ? 'checked=""' : '';?> ><span></span></label>
	                        </div>
	                    </td>
			    		<td><a class="<?php echo $v['key'] != 'A' && $v[
			    			'key'] != 'B' ? 'my-del' : '';?>" href="javascript::;"><?php echo $v['key'] != 'A' && $v[
			    			'key'] != 'B' ? '删除' : '';?></a></td>
			  		</tr>
  				<?php }}else{ ?>

  				

  				<tr class="my-tr0" data-idx="0">
		    		<td>
		    			<div class="table-cell idx1">
		    				<input type="hidden" name="options[A][is_img]" value="0">
                        	<a href="javascript:;" class="myselect">文本</a>
                            <!-- /<a href="javascript:;" class="noselect">图片</a> -->
                        </div>
                    </td>
		    		<td>
		   				<div class="options-div">
		   					<span>A. </span><input class="options" type="text" name="options[A][text]">
		   				</div>


						<div class="options-div1 form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 form_group_hide" id="form_group_{$name}_A">
						    <label class="col-xs-12" for="{$name}_A">A.</label>
						    <div class="col-xs-12 js-upload-image ">
						        <div id="file_list_{$name}_A" class="uploader-list">
						            
						        </div>

						        <div class="clearfix img-div" ></div>
						        <input type="hidden" name="{$name}_A" data-multiple="false" data-watermark='' data-thumb='' data-size="0" data-ext='' id="{$name}_A" value="">
						        <div id="picker_{$name}_A">上传单张图片</div>
						        
						    </div>
						</div>




		    		</td>
		    		<td>
		    			<div class="table-cell">
                        	<label class="css-input switch switch-sm switch-primary" title="文本/图片"><input type="checkbox" name="answer[A]" checked=""><span></span></label>
                        </div>
                    </td>
		    		<td><a href="javascript::;"></a></td>
		  		</tr>
		  		<tr class="my-tr1" data-idx="1">
		    		<td>
		    			<div class="table-cell idx1">
		    				<input type="hidden" name="options[B][is_img]" value="0">
                        	<a href="javascript:;" class="myselect">文本</a>
                            <!-- /<a href="javascript:;" class="noselect">图片</a> -->
                        </div>
                    </td>
		    		<td>
		   				<div class="options-div">
		   					<span>B. </span><input class="options" type="text" name="options[B][text]">
		   				</div>

		   				<div class="options-div1 form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 form_group_hide" id="form_group_{$name}_B">
						    <label class="col-xs-12" for="{$name}_B">B.</label>
						    <div class="col-xs-12 js-upload-image ">
						        <div id="file_list_{$name}_B" class="uploader-list">
						            
						        </div>

						        <div class="clearfix img-div" ></div>
						        <input type="hidden" name="{$name}_B" data-multiple="false" data-watermark='' data-thumb='' data-size="0" data-ext='' id="{$name}_B" value="">
						        <div id="picker_{$name}_B">上传单张图片</div>
						        
						    </div>
						</div>


		    		</td>
		    		<td>
		    			<div class="table-cell">
                        	<label class="css-input switch switch-sm switch-primary" title="文本/图片"><input type="checkbox" name="answer[B]"><span></span></label>
                        </div>
                    </td>
		    		<td><a href="javascript::;"></a></td>
		  		</tr>
		  		<?php }?>
			</table>
    	</div>
    
        {notempty name="tips"}
        <div class="help-block">{$tips}</div>
        {/notempty}
    </div>
</div>

<!-- <script type="text/javascript" src="/static/admin/js/builder/form.js"></script>
 -->
<script type="text/javascript">

	var idx = <?php echo empty($value) ? 1 : (count($value)-1);?>;
	var idx_key = ['A','B','C','D','E','F','G','H','I','J'];

	function aaaa(el){
		var $input_file       = $(el).find('input');
        var $input_file_name  = $input_file.attr('name');
        // 是否多图片上传
        var $multiple         = $input_file.data('multiple');
        // 允许上传的后缀
        var $ext              = $input_file.data('ext');
        // 图片限制大小
        var $size             = $input_file.data('size');
        // 缩略图参数
        var $thumb            = $input_file.data('thumb');
        // 水印参数
        var $watermark        = $input_file.data('watermark');
        // 图片列表
        var $file_list        = $('#file_list_' + $input_file_name);
        // 优化retina, 在retina下这个值是2
        var ratio             = window.devicePixelRatio || 1;
        // 缩略图大小
        var thumbnailWidth    = 100 * ratio;
        var thumbnailHeight   = 100 * ratio;
        // 实例化上传
        var uploader = WebUploader.create({
            // 选完图片后，是否自动上传。
            auto: true,
            // 去重
            duplicate: true,
            // 不压缩图片
            resize: false,
            compress: false,
            // swf图片路径
            swf: dolphin.WebUploader_swf,
            // 图片接收服务端。
            server: dolphin.image_upload_url,
            // 选择图片的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: '#picker_' + $input_file_name,
                multiple: $multiple
            },
            // 图片限制大小
            fileSingleSizeLimit: $size,
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: $ext,
                mimeTypes: 'image/jpg,image/jpeg,image/bmp,image/png,image/gif'
            },
            // 自定义参数
            formData: {
                thumb: $thumb,
                watermark: $watermark
            }
        });
        console.log(uploader);
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            console.log(file);
            var $li = $(
                    '<div id="' + file.id + '" class="file-item js-gallery thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<i class="fa fa-times-circle remove-picture"></i>' +
                    ($multiple ? '<i class="fa fa-fw fa-arrows move-picture"></i>' : '') +
                    '<div class="progress progress-mini remove-margin active" style="display: none">' +
                    '<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>' +
                    '</div>' +
                    '<div class="file-state img-state"><div class="bg-info">正在读取...</div>' +
                    '</div>'
                ),
                $img = $li.find('img');

            if ($multiple) {
                $file_list.append( $li );
            } else {
                $file_list.html( $li );
                $input_file.val('');
            }

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            // 设置当前上传对象
            curr_uploader = uploader;
            console.log(curr_uploader);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $percent = $( '#'+file.id ).find('.progress-bar');
            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功
        uploader.on( 'uploadSuccess', function( file, response ) {
            var $li = $( '#'+file.id );
            console.log(response.code);
            if (response.code) {
                if ($multiple) {
                    if ($input_file.val()) {
                        $input_file.val($input_file.val() + ',' + response.id);
                    } else {
                        $input_file.val(response.id);
                    }
                    $li.find('.remove-picture').attr('data-id', response.id);
                } else {
                    $input_file.val(response.id);
                }
            }

            $li.find('.file-state').html('<div class="bg-'+response.class+'">'+response.info+'</div>');
            $li.find('img').attr('data-original', response.path);
            // 上传成功后，再次初始化图片查看功能
            Dolphin.viewer();

            // 文件上传成功后的自定义回调函数
            if (window['dp_image_upload_success'] !== undefined) window['dp_image_upload_success']();
            // 文件上传成功后的自定义回调函数
            if (window['dp_image_upload_success_'+$input_file_name] !== undefined) window['dp_image_upload_success_'+$input_file_name]();
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id );
            $li.find('.file-state').html('<div class="bg-danger">服务器错误</div>');

            // 文件上传出错后的自定义回调函数
            if (window['dp_image_upload_error'] !== undefined) window['dp_image_upload_error']();
            // 文件上传出错后的自定义回调函数
            if (window['dp_image_upload_error_'+$input_file_name] !== undefined) window['dp_image_upload_error_'+$input_file_name]();
        });

        // 文件验证不通过
        uploader.on('error', function (type) {
            switch (type) {
                case 'Q_TYPE_DENIED':
                    Dolphin.notify('图片类型不正确，只允许上传后缀名为：'+$ext+'，请重新上传！', 'danger');
                    break;
                case 'F_EXCEED_SIZE':
                    Dolphin.notify('图片不得超过'+ ($size/1024) +'kb，请重新上传！', 'danger');
                    break;
            }
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            setTimeout(function(){
                $( '#'+file.id ).find('.progress').remove();
            }, 500);

            // 文件上传完成后的自定义回调函数
            if (window['dp_image_upload_complete'] !== undefined) window['dp_image_upload_complete']();
            // 文件上传完成后的自定义回调函数
            if (window['dp_image_upload_complete_'+$input_file_name] !== undefined) window['dp_image_upload_complete_'+$input_file_name]();
        });

        // 删除图片
        $file_list.delegate('.remove-picture', 'click', function(){
            $(this).closest('.file-item').remove();
            if ($multiple) {
                var ids = [];
                $file_list.find('.remove-picture').each(function () {
                    ids.push($(this).data('id'));
                });
                $input_file.val(ids.join(','));
            } else {
                $input_file.val('');
            }
            // 删除后，再次初始化图片查看功能
            Dolphin.viewer();
        });

        // 将上传实例存起来
        // webuploader.push(uploader);
        // console.log(webuploader);
        // 如果是多图上传，则实例化拖拽
	}
	$(function(){
		$('.my-table').on('click','.idx1 a',function(){
			var obj = $(this);
			if(obj.attr('class') == 'noselect'){  
				obj.removeClass('noselect').addClass('myselect');
				obj.siblings('a').removeClass('myselect').addClass('noselect');
				if(obj.html() == '图片'){
					obj.parents('tr').find('.options-div1').removeClass('form_group_hide');
					obj.parents('tr').find('.options-div').addClass('form_group_hide');
					obj.parents('.idx1').find('input[type="hidden"]').val(1);
				}else{
					obj.parents('tr').find('.options-div').removeClass('form_group_hide');
					obj.parents('tr').find('.options-div1').addClass('form_group_hide');
					obj.parents('.idx1').find('input[type="hidden"]').val(0);
				}
			}
		});
		$('.my-add').click(function(){

			if(idx == 9){
				alert('最多添加10个选项');
				return false;
			}
			idx++;
            ///<a href="javascript:;" class="noselect">图片</a>
			$(this).parents('.my-table').find('table').append('<tr class="my-tr"'+idx+' data-idx="'+idx+'"><td><div class="table-cell idx1"><input type="hidden" name="options['+idx_key[idx]+'][is_img]" value="0"><a href="javascript:;" class="myselect">文本</a></div></td><td><div class="options-div"><span>'+idx_key[idx]+'. </span><input class="options" type="text" name="options['+idx_key[idx]+'][text]"></div><div class="options-div1 form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 form_group_hide" id="form_group_options_'+idx_key[idx]+'"><label class="col-xs-12" for="options_'+idx_key[idx]+'">'+idx_key[idx]+'</label><div class="col-xs-12 js-upload-image1 "><div id="file_list_options_'+idx_key[idx]+'" class="uploader-list"></div><div class="clearfix img-div" ></div><input type="hidden" name="options_'+idx_key[idx]+'" data-multiple="false" data-watermark="" data-thumb="" data-size="0" data-ext="" id="options_'+idx_key[idx]+'" value=""><div id="picker_options_'+idx_key[idx]+'">上传单张图片</div></div></div></td><td><div class="table-cell"><label class="css-input switch switch-sm switch-primary" title="文本/图片"><input type="checkbox" name="answer['+idx_key[idx]+']" ><span></span></label></div><td><a href="javascript::;" class="my-del">删除</a></td></tr>');
			aaaa('#form_group_options_'+idx_key[idx]);
			return false;
		});
		$('.my-table').on('click','.my-del',function(){
			var tr = $(this).parents('tr');
			var prev_idx = tr.prev().attr('data-idx'); //上一个下标
			var nextAll = tr.nextAll().remove();

			idx = prev_idx;
			// if(nextAll.length > 0){
			// 	nextAll.each(function(){
			// 		idx++;
			// 		$(this).attr('class','my_tr'+idx);
			// 		$(this).attr('data-idx',idx);
			// 		$(this).find('.options-div span').html(idx_key[idx]+'. ');
			// 		$(this).find('.options').attr('name',"option["+idx_key[idx]+"][text]");
			// 		$(this).find('.switch-primary input').attr('name','answer['+idx_key[idx]+']');
			// 		$(this).find('.idx1 input').attr('name','options['+idx_key[idx]+'][is_img]');
			// 		$(this).find('')
			// 	})
			// }
			tr.remove();
			return false;
		});
	})

</script>